<template>
  <div class="avatar-menu">
    <el-dropdown @command="handleCommand">
      <circle-img class="avatar-menu-img" :src=avatarUrl></circle-img>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-if="!isAdmin" command="profile">个人信息</el-dropdown-item>
        <el-dropdown-item v-if="!isAdmin" command="chat">聊天系统</el-dropdown-item>
        <el-dropdown-item v-if="!isAdmin" command="file">文件仓库</el-dropdown-item>
        <el-dropdown-item v-if="isStudent" command="sign">学生签到</el-dropdown-item>
        <el-dropdown-item command="signOut">
          <span style="color: #ff4d4d">退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <teacher-profile-dialog v-if="isTeacher" :visible.sync='showProfileDialog' />
    <student-profile-dialog v-if="isStudent" :visible.sync='showProfileDialog' />
    <chat-dialog v-if="!isAdmin" :visible.sync='showChatDialog' />
    <file-dialog v-if="!isAdmin" :visible.sync='showFileDialog' />
    <student-sign-dialog v-if="isStudent" :visible.sync='showSignDialog' />
  </div>
</template>

<script>
import CircleImg from '../common/CircleImg'
import TeacherProfileDialog from '../teacher/TeacherProfileDialog'
import StudentProfileDialog from '../student/StudentProfileDialog'
import ChatDialog from '../chat/ChatDialog'
import FileDialog from '../user/FileDialog'
import StudentSignDialog from '../student/StudentSignDialog'

export default {
  name: 'AvatarMenu',
  components: {
    CircleImg,
    TeacherProfileDialog,
    StudentProfileDialog,
    ChatDialog,
    FileDialog,
    StudentSignDialog
  },
  data () {
    return {
      avatarUrl: '',
      isAdmin: false,
      isTeacher: false,
      isStudent: false,
      showProfileDialog: false,
      showChatDialog: false,
      showFileDialog: false,
      showSignDialog: false
    }
  },
  methods: {
    handleCommand (command) {
      switch (command) {
        case 'profile': {
          this.showProfileDialog = true
          break
        }
        case 'chat': {
          this.showChatDialog = true
          break
        }
        case 'file': {
          this.showFileDialog = true
          break
        }
        case 'sign': {
          this.showSignDialog = true
          break
        }
        case 'signOut': {
          this.signOut()
          break
        }
        default:
          break
      }
    },
    signOut () {
      // 清空 vuex
      this.$store.commit('userSignOut')
      this.$router.push({ path: '/sign-in-up' })
    }
  },
  mounted () {
    this.avatarUrl = this.$store.state.user.avatar
    this.isAdmin = this.$store.getters.isAdmin
    this.isTeacher = this.$store.getters.isTeacher
    this.isStudent = this.$store.getters.isStudent
  }
}
</script>

<style lang="stylus" scoped>
.avatar-menu-img {
  height: 90px;
  width: 90px;
}
</style>
